<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
        }
        .yes {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box"> 
            <button :class="{yes:item.isDaka}" style="height: 50px;margin: 5px;" @click="sign(item)" v-for="item in list">{{item.username}} {{item.isDaka?'已打卡':'未打卡'}}</button>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                num: 15,
                percent: 0,
                list: [],
            },

            created() {
                this.createWS();
            },
            watch: {
                list: {
                    handler(value) {
                        let all = value.length;
                        let yes = value.filter((item) => !!item.isDaka);
                        this.percent = parseInt((yes.length / all) * 100);
                    },
                    deep: true
                },
            },
            computed: {
                // 列表分组
                listArr() {
                    let newList = [];
                    let sum = 0;
                    for (let i = 1; i < this.num; i++) {
                        sum += i;
                        let arr = this.list.slice(sum, sum + i + 1);
                        if (arr.length === 0) {
                            break;
                        } else if (arr.length < i) {
                            let emptyArr = new Array();
                            emptyArr.length = i - arr.length + 1;
                            emptyArr.fill({});
                            arr.push(...emptyArr);
                        }
                        newList.push(arr);
                    }
                    return newList;
                },
            },

            methods: {
                reset() {
                    this.ws.send(
                        this.toJson({
                            insName: "reset",
                        })
                    );
                },
                onreset(res) {
                    this.ongetList(res);
                },

                onsendMsg({data}) {
                    alert(data.msg);
                },

                getList() {
                    this.ws.send(
                        JSON.stringify({
                            insName: "getList",
                        })
                    );
                },
                ongetList(res) {
                    this.list = res.data.map((item) => {
                        return {
                            ...item,
                            loading: false,
                        };
                    });
                },

                sign(item) {
                    if (!item.username) return false;
                    item.loading = true;
                    this.ws.send(
                        this.toJson({
                            insName: "sign",
                            isDaka: !item.isDaka,
                            username: item.username,
                        })
                    );
                },
                onsign({
                    query
                }) {
                    let user = this.list.find((item) => item.username === query.username);
                    setTimeout(() => {
                        user.loading = false;
                        user.isDaka = query.isDaka;
                    }, 300);
                },

                createWS() {
                    this.ws = new WebSocket("ws://localhost:3000/ws");
                    this.ws.onopen = (evt) => { 
                        this.getList();
                    };
                    // 监听服务器信息
                    this.ws.onmessage = (evt) => {
                        try {
                            let res = JSON.parse(evt.data);
                            if (res.code != 666) {
                                this.$alert(res.msg);
                                console.info("错误信息", res);
                                return false;
                            }
                            this["on" + res.insName](res);
                            console.info(res);
                        } catch (error) { 
                            this.$alert(error);
                        }
                    };

                    this.ws.onclose = (evt) => {
                        console.error("连接关闭");
                    };
                },
                toJson(value) {
                    if (value instanceof Object) {
                        return JSON.stringify(value);
                    } else {
                        return value;
                    }
                },
            },
        })
    </script>
</body>

</html>